<template>
  <div>
    <r-search
      ref="search"
      :searchData="searchData"
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :inline="true"
    />
    <r-search :searchHandle="searchHandleAdd" />

    <r-table
      :isIndex="true"
      :isPagination="true"
      :isHandle="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="pagination"
      :loading="tableLoading"
      :tableHandles="tableHandles"
      :isSelection="false"
      @refresh="page()"
    />
    <!-- ImportData的Template -->
    <uploadFile
      type="userWhite"
      :res="{ type: 1 }"
      v-if="uploadFile_fag"
      v-on:uploadFile_call="uploadFile_call"
    >
    </uploadFile>

    <r-form
      :formRules="formRules"
      :formHandle="formHandle"
      :formData="formData"
      :formCols="formCols"
      ref="elForm"
      labelWidth="100px"
      dialogWidth="700px"
      :isHandle="true"
    />
  </div>
</template>

<script>
import uploadFile from "../cus/uploadFile";
import { isMobile } from "@/utils/validate";

var validateMobile = (rule, value, callback) => {
  if (!isMobile(value)) {
    callback(new Error("Phone格式错误"));
  } else {
    callback();
  }
};
export default {
  components: {
    uploadFile
  },
  data() {
    return {
      uploadFile_fag: false, //ControlImportData的Template的变量
      userDetailsData: {
        show: false
      },
      searchData: {
        phone: ""
      },
      searchForm: [
        { type: "input", placeholder: "Phone码", prop: "phone", width: 200 }
      ],
      searchHandle: [
        {
          type: "primary",
          label: "Search",
          plain: true,
          handle: e => this.getData()
        }
        // {type:'primary',label:'Reset', handle: e => this.elFormSubmit(),}
      ],
      tableLoading: false,
      tableData: [],
      tableCols: [
        // { label: "Belonging Agent商ID", prop: "agentId", },

        {
          label: "白名单",
          prop: "whetherWhite",
          type: "html",
          html: data => {
            let html =
              "<p>" +
              (data.whetherWhite == "1"
                ? "是"
                : data.whetherWhite == "0"
                ? "否"
                : "-") +
              "</p>";
            return html;
          }
        },
        { label: "User phone", prop: "phone" },
        {
          label: "Operations",
          type: "button",
          width: 100,
          btnList: [
            {
              label: "Delete",
              type: "danger",
              handle: row => {
                this.del(row);
              }
            }
          ]
        }
      ],
      searchHandleAdd: [
        {
          label: "Add",
          type: "success",
          plain: true,
          icon: "el-icon-circle-plus-outline",
          handle: e => this.elFormVisible()
        },
        {
          label: "ImportData",
          type: "success",
          plain: true,
          handle: e => {
            this.uploadFile_fag = true;
          }
        },
        {
          label: "ExportData",
          icon: "el-icon-download",
          type: "success",
          plain: true,
          loading: false,
          // handle: (that) => this.handleDownload(),
          handle: async e => {
            const res = await this.apis.exportUnregisteredUser({});
            // console.log("res---", res.msg);
            location.href =
              process.env.VUE_APP_URL + "/profile/download" + res.msg;
          }
        },
        {
          label: "TemplateDownload",
          type: "success",
          plain: true,
          handle: async e => {
            // const res = await this.apis.userWhite_download();
            // console.log("res---", res);
            // location.href = process.env.VUE_APP_URL + res.msg;
            location.href =
              process.env.VUE_APP_URL + "/profile/白名单ImportTemplate.xlsx";
          }
        }
      ],
      tableHandles: [],
      pagination: { limit: 10, page: 1, total: 0 },
      checkBox: [],
      formData: {
        phone: ""
      },
      formCols: [{ type: "input", label: "Phone", width: 450, prop: "phone" }],
      formRules: {
        phone: [
          { required: true, message: "Please Enter Phone", trigger: "blur" },
          { validator: validateMobile, trigger: "blur" }
        ]
      },
      formHandle: [
        {
          label: "Cancel",
          handle: e => this.elFormVisible()
        },
        {
          label: "Confirm",
          type: "success",
          handle: e => this.elFormSubmit()
        }
      ]
    };
  },
  created() {
    this.getData();
  },
  mounted() {},
  methods: {
    elFormSubmit() {
      this.$refs.elForm.$refs.ruleForm.validate(async valid => {
        if (valid) {
          const res = await this.apis.userWhite_add({
            phone: this.formData.phone
          });
          this.$message({
            type: res.code == 200 ? "success" : "error",
            message: res.msg
          });
          if (res.code == 200) {
            this.elFormVisible();
            this.getData();
          }
        }
      });
    },

    del(row) {
      this.$confirm("Confirm要Delete吗?", "Hint", {
        confirmButtonText: "Confirm",
        cancelButtonText: "Cancel",
        type: "warning"
      })
        .then(async () => {
          var res = await this.apis.userWhite_del({
            phone: row.phone
          });
          this.$message({
            type: res.code == 200 ? "success" : "error",
            message: res.msg
          });
          if (res.code == 200) {
            this.getData();
          }
        })
        .catch(() => {});
    },
    // 查询未Register白名单列表
    async getData() {
      var res = await this.apis.getUnregisteredUser({
        // phone: 15976418151,
        phone: this.searchData.phone,
        pageNum: this.pagination.page,
        pageSize: this.pagination.limit
      });

      if (res.code == 200) {
        var rows = res.rows || [];
        console.log(rows);
        // for (let i = 0; i < rows.length; i++) {
        //   let item = rows[i];
        //   // item['bb'] = '-'

        //   // if (item.phone) {

        //   //   item[key] = JSON.parse(JSON.stringify(item))[key]

        //   // } else {
        //   //   this.tableCols.forEach(v => {
        //   //     if (v.prop !== 'phone' && v.prop !== 'agentId') {
        //   //       item[v.prop] = '-'
        //   //     }
        //   //   })
        //   // }
        // }
        // list.map(res => {
        // console.log(res)
        // res.btn_des = res.state == 34 ? 'Enable' : 'Forbidden';
        // });
        this.tableData = rows;
        this.pagination.total = res.total;
      }
    },

    page() {
      this.getData();
    },
    // ImportData
    uploadFile_call(fag) {
      this.uploadFile_fag = false;
      if (fag) {
        this.getData();
      }
    }
  }
};
</script>

<style scoped lang="scss"></style>
